<template>
  <div class="new-repair">
    <div class="nr-main">
      <div class="nrm-common-one">
        <el-input
          v-model="iptValOne"
          class="nrmco-input"
          placeholder="请输入内容"
        ></el-input>
        <div class="nrmco-btn">搜索</div>
      </div>
      <div class="nrm-common-two">
        <span></span>
        <span>订单信息</span>
      </div>
      <ul class="nrm-one">
        <li>
          <p>
            <span>订单编号</span>
            <span>UUOHN001</span>
          </p>
          <p>
            <span>订单类型</span>
            <span>团体订单/个定下单</span>
          </p>
        </li>
        <li>
          <p>
            <span>订单状态</span>
            <span>返修</span>
          </p>
          <p></p>
        </li>
        <li>
          <p>
            <span>创建时间</span>
            <span>2020-06-01</span>
          </p>
        </li>
      </ul>
      <div class="nrm-common-two">
        <span></span>
        <span>客户信息（或员工信息）</span>
      </div>
      <ul class="nrm-one">
        <li>
          <p>
            <span>客户姓名</span>
            <span>李朝阳</span>
          </p>
          <p>
            <span>尺寸类型</span>
            <span>舒适</span>
          </p>
          <p>
            <span>年龄</span>
            <span>20</span>
          </p>
        </li>
        <li>
          <p>
            <span>客户性别 </span>
            <span>男性</span>
          </p>
          <p>
            <span>体重</span>
            <span>95kg</span>
          </p>
        </li>
        <li>
          <p>
            <span>身高</span>
            <span>170cm</span>
          </p>
        </li>
      </ul>
      <div class="nrm-common-one">
        <el-input
          v-model="iptValOne"
          class="nrmco-input"
          placeholder="请输入内容"
        ></el-input>
        <div class="nrmco-btn">搜索</div>
        <div class="nrmco-btn">查看员工列表</div>
      </div>
      <div class="nrm-two">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
          <el-table-column
            prop="index"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="员工姓名"
          >
          </el-table-column>
          <el-table-column
            prop="num"
            label="员工编号"
          >
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
          >
          </el-table-column>
          <el-table-column
            prop="bumen"
            label="部门名称"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                :style="{color: '#D0AC04'}"
              >立即添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="nrm-common-two">
        <span></span>
        <span>返修参数</span>
      </div>
      <ul class="nrm-five">
        <li
          :class="current === 1 ? 'active' : ''"
          @click="current = 1"
        >西装上衣</li>
        <li
          :class="current === 2 ? 'active' : ''"
          @click="current = 2"
        >西裤</li>
      </ul>

      <div
        class="nrm-six"
        v-if="current === 1"
      >
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >衣长</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >后长</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >胸围</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >腰围</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >下摆</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
      </div>

      <div
        class="nrm-six"
        v-if="current === 2"
      >
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >裤长</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >裤脚</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >腿围</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >腰围</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
        <el-input
          placeholder="请输入内容"
          v-model="oneObj.input1"
          class="nrms-ipt"
        >
          <div
            slot="prefix"
            class="nrmsi-label"
          >臀围</div>
          <div
            slot="suffix"
            class="nrmsi-right"
          >cm</div>
        </el-input>
      </div>

      <div class="nrm-common-two">
        <span></span>
        <span>返修金额</span>
      </div>
      <div class="nrm-there">
        <p>返修金额</p>
        <p>1200元</p>
      </div>

      <div class="nrm-four">提交订单</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iptValOne: "",
      current: 1,
      oneObj: {
        input1: "",
      },
      tableData: [
        {
          index: "1",
          name: "王小虎",
          num: "123456",
          sex: "男",
          bumen: "北京总部",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.new-repair {
  box-sizing: border-box;
  padding: 30px 90px;
  .nrm-common-one {
    display: flex;
    align-items: center;
    .nrmco-input {
      width: 290px;
    }
    .nrmco-btn {
      box-sizing: border-box;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #303030;
      border-radius: 3px;
      margin: 0 10px;
      font-size: 16px;
      font-weight: 500;
      color: #ffe56d;
      cursor: pointer;
    }
  }
  .nrm-common-two {
    display: flex;
    align-items: center;
    margin-top: 25px;
    span:nth-child(1) {
      width: 4px;
      height: 28px;
      background: #4a4a4a;
      margin-right: 15px;
    }
    span:nth-child(2) {
      font-size: 16px;
      font-weight: 600;
      color: #4e4e4e;
    }
  }
  .nr-main {
    background: #fff;
    box-sizing: border-box;
    padding: 20px 40px 30px;
    .nrm-one {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      box-sizing: border-box;
      padding: 0 20px;
      li {
        p {
          margin-bottom: 20px;
          span {
            font-size: 16px;
            color: #4e4e4e;
          }
          span:nth-child(1) {
            margin-right: 20px;
            font-weight: 200;
          }
          span:nth-child(2) {
            font-weight: 500;
          }
        }
      }
    }
    .nrm-two {
      margin-top: 20px;
    }
    .nrm-there {
      display: flex;
      align-items: center;
      margin-top: 30px;
      p:nth-child(1) {
        width: 90px;
        height: 40px;
        background: #f2f2f2;
        font-size: 14px;
        font-weight: 400;
        color: #555555;
        line-height: 40px;
        text-align: center;
        margin-right: 32px;
      }
      p:nth-child(2) {
        font-size: 16px;
        font-weight: bold;
        color: #393939;
      }
    }
    .nrm-four {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #24c04f;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
      margin-top: 40px;
      cursor: pointer;
    }
    .nrm-five {
      display: flex;
      margin-top: 20px;
      li {
        width: 90px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #ededed;
        border-radius: 3px;
        font-size: 14px;
        color: #a1a1a1;
        margin-right: 12px;
        cursor: pointer;
      }
      .active {
        background: #303030;
        color: #ffe56d;
      }
    }
    .nrm-six {
      display: flex;
      flex-wrap: wrap;
      .nrms-ipt {
        width: 230px;
        box-sizing: border-box;
        padding-left: 30px;
        margin-top: 20px;
        margin-right: 20px;
      }
      .nrmsi-label {
        line-height: 40px;
        width: 55px;
        height: 40px;
        background: #2d2d2d;
        border-radius: 3px;
        color: #ffec70;
        position: relative;
        left: -5px;
      }
      .nrmsi-right {
        line-height: 40px;
      }
    }
  }
}
</style>
